<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>NLP Sample</title>

	<link href="static/components/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="static/components/style.css" rel="stylesheet">
</head>
<body>
	<div id="app-container" class="container-fluid">
		<div v-if="!home">
			<header class="mb-2 app-header fixed-top" id="page-header" style="background-color: #333!important;">
				<div class="row">
					<div class="col-2">
						<h1><span class="badge badge-pill badge-danger">{{title}}</span></h1>
					</div>
					<div class="col-8">
						<div class="input-group input-group-lg">
							<input type="text" class="form-control" placeholder="" v-model.trim="keywords" @keyup.enter="search" v-focus>
							<div class="input-group-append">
								<button class="btn btn-info" type="button" @click="search">搜&nbsp;&nbsp;索</button>
						  	</div>
						</div>
					</div>
				</div>
				<div class="row justify-content-center">
					<div class="col-8">
						<div class="row">
							<div class="col align-self-center">
								<input type="range" class="form-control-range" v-model="mininum" @keyup.enter="search" style="outline: none;">
							</div>	
							<div class="col-1 align-self-center" style="padding-left: 0;">
								<span class="badge badge-warning align-middle w-100" style="font-size: 20px;">{{mininum}}%</span>
							</div>
						</div>
					</div>
				</div>
			</header>

			<main id="page-main">
				<div 
					v-show="!loading"
					v-for="item in contents" 
					:key="item.filename" 
					class="alert alert-dark">
					<!-- <div class="row">
						<div class="col">
							<h4><a :href="'static/files/pdf/'+item.filename" target="_blank">{{item.subject}}</a></h4>
						</div>
						<div class="col text-right">
							<h4><span class="badge badge-danger">{{(item.similarity * 100).toFixed(4)}}%</span></h4>
						</div>
					</div> -->
					<!-- <div class="progress">
					  <div class="progress-bar bg-danger progress-bar-striped progre1ss-bar-animated" role="progressbar" :style="{ width: (item.similarity * 100).toFixed(4) + '%' }" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
					</div> -->
					<!-- <div class="alert alert-dark"> -->
						<h4>
							<span class="badge badge-success align-middle">{{(item.similarity * 100).toFixed(4)}}%</span>
							<a :href="'static/files/pdf/'+item.filename" target="_blank" class="align-middle">{{item.subject}}</a>
						</h4>
						<!-- <div class="txt-align" data-toggle="tooltip" data-placement="bottom" :title="item.summary">{{item.summary}}</div> -->
						<div class="txt-align">{{item.summary}}</div>
					<!-- </div> -->
				</div>
				<div v-if="contents.length < 1 && !loading">
					<div class="row justify-content-center">
						<div class="col-6 text-center" role="alert">
							<h1>无匹配结果</h1>
						</div>
					</div>
				</div>
				<div v-show="loading">
					<div class="row justify-content-center">
						<div class="col-6 text-center" role="alert">
							<div class="spinner-border" role="status">
							  <span class="sr-only">Loading...</span>
							</div>
						</div>
					</div>
				</div>
			</main>
		</div>
		<!-- h-100  -->
		<div class="row justify-content-center" v-else>
			<!-- align-self-center -->
			<div class="col-6 text-center" style="margin-top: 20rem;">
		      	<h1><span class="badge badge-pill badge-danger">{{title}}</span></h1>
		      	<div class="input-group input-group-lg">
					<input type="text" class="form-control" placeholder="" v-model.trim="keywords" @keyup.enter="search" v-focus>
					<div class="input-group-append">
						<button class="btn btn-info" type="button" @click="search">搜&nbsp;&nbsp;索</button>
				  	</div>
				</div>
		    </div>
		</div>
	</div>

	<!-- <script src="static/components/jquery-3.4.1.slim.min.js"></script> -->
    <!-- <script src="static/components/bootstrap/js/bootstrap.min.js"></script> -->
    <script src="static/components/vue/vue.js"></script>
    <script src="static/components/axios.min.js"></script>
    <script src="static/components/index.js"></script>
</body>
</html>
